<div class="host">
    <div breadcrumb title="主机" image="host-black"></div>
    <div class="right-main">
        <div class="input-group pull-right global-search">
            <label class="input-group-addon">全局搜索</label>
            <input type="text" class="form-control" ng-model="vm.filter.$"/>
        </div>
        <table class="table table-hover">
            <caption>
                <div class="grid-action">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" ng-click="vm.toggleFilter()">
                            <i class="glyphicon glyphicon-search"></i>
                            筛选
                        </button>
                        <button type="button" class="btn btn-default" ng-click="vm.refresh()">
                            <i class="glyphicon glyphicon-refresh"></i>
                            刷新
                        </button>
                        <button type="button" class="btn btn-default">
                            <i class="glyphicon glyphicon-cog"></i>
                            设置
                        </button>
                    </div>
                </div>
            </caption>
            <thead>
            <tr>
                <th ng-repeat="column in vm.columns"
                    ng-if="!column.hidden"
                    ng-click="vm.sort.toggle(column)"
                    ng-class="{sortable: column.sortable !== false}">
                    <a href="">{{column.label}}
                        <i ng-if="column.name === vm.sort.column && vm.sort.direction"
                           class="glyphicon {{vm.sort.direction|orderClass}}"></i>
                    </a>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-if="vm.showFilter">
                <td><input type="text" ng-model="vm.filter.hostname" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.label" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.ip" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.docker" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.status" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.memory_per" class="form-control"/></td>
                <td><input type="text" ng-model="vm.filter.memory_num" class="form-control"/></td>
                <td><input type="number" ng-model="vm.filter.docker_run" class="form-control"/></td>
                <td><input type="number" ng-model="vm.filter.docker_stop" class="form-control"/></td>
            </tr>
            <tr ng-repeat="item in vm.items|filter:vm.filter|orderBy:vm.sort.column:vm.sort.direction===-1">
                <td>
                    <a href="">{{item.hostname}}
                    <i class="glyphicon glyphicon-modal-window"></i>
                    </a>
                </td>
                <td>
                    <span class="label label-info">{{item.label}}</span>
                    </td>
                <td>{{item.ip}}</td>
                <td>{{item.docker}}</td>
                <td style="color: rgb(83,173,125)">{{item.status}}</td>
                <td>{{item.memory_per}}</td>
                <td>{{item.memory_num}}</td>
                <td>{{item.docker_run}}</td>
                <td>{{item.docker_stop}}</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>